import React, { useEffect } from 'react'
import { useCharts } from '@/hook/useCharts'
// import api from '@/api'
import styles from './chart.module.less'
import {
  Card
  // Button
} from 'antd'
import { lineData, pieLdata, pieRdata, radarData } from '@/mock/chart'

const Charts: React.FC = () => {
  const [lineRef, lineChart] = useCharts() // 初始化折线图
  const [pieRef1, pieChart1] = useCharts() // 初始饼图
  const [pieRef2, pieChart2] = useCharts() // 初始饼图
  const [radarRef, radarChart] = useCharts() // 初始化雷达图
  useEffect(() => {
    initLineChart()
    renderPieChart1()
    renderPieChart2()
    renderRadarChart()
  }, [lineChart, pieChart1, pieChart2, radarChart])
  // 折线图
  const initLineChart = async () => {
    if (!lineChart) return
    // const data = await api.getLineData()
    const data = lineData
    lineChart?.setOption({
      tooltip: {
        // 指轴，如X轴和Y轴，在图表中代表了数据系列的刻度或维度
        trigger: 'axis' // 提示框触发模式（鼠标移入显示）
      },
      legend: {
        data: ['订单', '流水']
      },
      grid: {
        left: 50,
        right: 50,
        bottom: 20
      },
      xAxis: {
        data: data.label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单',
          type: 'line',
          data: data.order
        },
        {
          name: '流水',
          type: 'line',
          data: data.money
        }
      ]
    })
  }
  // 饼图1
  const renderPieChart1 = async () => {
    if (!pieChart1) return
    // const data = await api.getPieCityData()
    const data = pieLdata
    pieChart1?.setOption({
      title: {
        text: '司机城市分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item' // 提示框触发模式（鼠标移入显示） 单个的数据元素，适用于散点图、柱状图
      },
      legend: {
        orient: 'vertical', // 竖排列
        left: 'left'
      },
      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: '50%',
          data
        }
      ]
    })
  }
  // 加载饼图2
  const renderPieChart2 = async () => {
    if (!pieChart2) return
    // const data = await api.getPieAgeData()
    const data = pieRdata
    pieChart2?.setOption({
      title: {
        text: '司机年龄分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical', // 竖排列
        left: 'left'
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          radius: [50, 150], // 内环和外环半径
          roseType: 'area', // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
          data
        }
      ]
    })
  }
  // 加载雷达图
  const renderRadarChart = async () => {
    if (!radarChart) return
    // const data = await api.getRadarData()
    const data = radarData
    radarChart?.setOption({
      legend: {
        data: ['司机模型诊断']
      },
      radar: {
        indicator: data.indicator
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '模型诊断',
          type: 'radar',
          data: data.data
        }
      ]
    })
  }
  return (
    <>
      <div className={styles.chart}>
        <Card
          title='订单和流水走势图'
          // extra={
          //   <Button type='primary' onClick={initLineChart}>
          //     刷新
          //   </Button>
          // }
        >
          <div ref={lineRef} className={styles.itemChart}></div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          title='司机分布'
          // extra={
          //   <Button
          //     type='primary'
          //     onClick={async () => {
          //       await renderPieChart1()
          //       await renderPieChart2()
          //     }}
          //   >
          //     刷新
          //   </Button>
          // }
        >
          <div className={styles.pieChart}>
            <div ref={pieRef1} className={styles.itemPie}></div>
            <div ref={pieRef2} className={styles.itemPie}></div>
          </div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          title='模型诊断'
          // extra={
          //   <Button type='primary' onClick={renderRadarChart}>
          //     刷新
          //   </Button>
          // }
        >
          <div ref={radarRef} className={styles.itemChart}></div>
        </Card>
      </div>
    </>
  )
}
export default React.memo(Charts)
